<template>
  <a-form name="advanced_search" autoComplete="off" :label-col="getWidth()" style="min-height:300px"
    :model="basicFormState" ref="basicFormRef">

    <template v-for="(item, index) in basicFormState">
      <div class="basic-item">
        <component :is="comps[item.componentName]" :index="index" :element="item" v-if="item" :key="item"
          :formNamePath="[index, 'value']" />
      </div>
    </template>
  </a-form>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, } from 'vue';
import { comps } from '@/components/draggable/exportComp';
import { dataSourceType, detailDataItemType } from "@/type.d";
const props = defineProps({
  basicFormState: {
    type: Array,
    default: []
  },
  isVisibleObj: {
    type: Object,
    default: {}
  },
  addModelSelection: {
    type: Array,
    default: []
  },
  contentModelList: {
    type: Array,
    default: []
  }
})

//data
let isVisibleObj = reactive<any>(props.isVisibleObj)
const basicFormState = ref<any[]>(props.basicFormState)
console.log(basicFormState);


const basicFormRef = ref<any>(null)
const basicFormParam = reactive({ basic: '' })
watch(() => props.basicFormState, (newVal, oldVal) => {
  basicFormState.value = JSON.parse(JSON.stringify(newVal));
  basicFormState.value.forEach((ue_list: any) => {
    ue_list.rule.validator = new Function(
      "return " + ue_list.rule.validator
    )();
  });
}, { deep: true })
watch(() => props.addModelSelection, (newVal, oldVal) => {
  let obj: dataSourceType = {}
  basicFormState.value.length && basicFormState.value.forEach((item: dataSourceType) => {
    if (item.param === 'contentModelTpls') {
      //let selectList = 
      item.value = props.contentModelList.length && props.contentModelList.filter((item: any) => (newVal.includes(item.id))) || []
      item.value && item.value.forEach((item: any) => item.selected = true)
    }
    obj[item.param] = item.value
  })
  basicFormParam.basic = JSON.stringify(obj)
}, { deep: true })

watch(() => props.isVisibleObj, (newVal, oldVal) => {
  let obj: dataSourceType = {}
  basicFormState.value.length && basicFormState.value.forEach((item: dataSourceType) => {
    if (item.param === 'contentModelTpls') {
      item.isVisible = newVal.isVisible
    }
    obj[item.param] = item.value
  })
  basicFormParam.basic = JSON.stringify(obj)
}, { deep: true })
watch(() => basicFormState.value, (newVal, oldVal) => {
  let obj: dataSourceType = {}
  newVal.length && newVal.forEach((item: dataSourceType) => {
    if (item.param === 'contentModelTpls') {
      isVisibleObj.isVisible = item.isVisible
    }
    obj[item.param] = item.value
  })
  basicFormParam.basic = JSON.stringify(obj)
}, { deep: true })

//获取最大的label的宽度
const getWidth = () => {
  let labelLength: any[] = [];
  basicFormState.value.forEach((item: any) => {
    labelLength.push(item.label?.length || 0);
  });
  let maxLength = Math.max(...labelLength);
  return { style: { width: (maxLength + 1) * 14 + "px" } };
};
defineExpose({ basicFormParam, basicFormRef });
</script>

<style lang="scss" scoped>
.basic-item {
  margin-top: 24px;
  margin-left: 32px;
}

::v-deep(.ant-form-item-label) {
  width: 140px;
}

::v-deep(.ant-input:placeholder-shown) {
  // width: 304px;
}
</style>
